<template>
    <el-card class="box-card">
        <el-table v-loading="loading" :data="skuList" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column label="名称" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />
            <el-table-column label="默认图片" width="180" align="center">
                <template v-slot="{ row }">
                    <img :src="row.skuDefaultImg" style="width:80px; height:80px">
                </template>
            </el-table-column>
            <el-table-column label="重量(KG)" prop="weight" />
            <el-table-column label="价格(元)" prop="price" />
            <el-table-column label="操作" width="280px">
                <template v-slot="{ row }">
                    <el-button v-if="row.isSale == 0" type="success" :icon="Top" size="small" @click="onSale(row.id)">
                    </el-button>
                    <el-button v-else type="info" :icon="Bottom" size="small" @click="cancelSale(row.id)"></el-button>
                    <el-button type="primary" :icon="Edit" size="small"></el-button>
                    <el-button type="info" :icon="InfoFilled" size="small"></el-button>

                    <el-popconfirm :title="`确定要删除${row.skuName}吗?`" @confirm="deleteSku(row.id)">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" size="small"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
            :small="small" :disabled="disabled" :background="background"
            layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'Sku'
}
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Loading, Edit, Delete, Top, Bottom, InfoFilled } from '@element-plus/icons-vue'
import { getSkuListApi, reqDeleteSku, onSaleApi, cancelSaleApi } from '@/api/product/sku'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(20)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const skuList = ref([])
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getSkuList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getSkuList()
}

const getSkuList = async () => {
    const result = await getSkuListApi(currentPage.value, pageSize.value)
    // console.log(result.records[0]);
    skuList.value = result.records
    total.value = result.total

}

onMounted(() => {
    getSkuList()
})

// 删除
const deleteSku = async (id: number) => {
    await reqDeleteSku(id)
    ElMessage.success('spu删除成功……')
    getSkuList()
}

// 下架
const onSale = async (id: number) => {
    await onSaleApi(id)
    getSkuList()
    ElMessage.success('下架成功……')
}
// 上架
const cancelSale = async (id: number) => {

    await cancelSaleApi(id)
    getSkuList()
    ElMessage.success('上架成功……')
}
</script>


<style>

</style>